import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    ScrollView,

} from 'react-native';
//导入json数据
var LocalData = require('../LocalData.json');
//引入计时器类库
var ScrollImageView = require('../Component/ZHFScrollViewDemo');
var NewsDetail = require('../Component/ZHFNewsDetail');
//var  ScrollImageView = require('../Component/ZHFScrollViewDemo');
var  Home = React.createClass({
    getDefaultProps(){
        return{
            url_api:'https://www.i-fbs.com/api.php?app=goods&act=getIndexData&app_id=Yamei&app_secret=63A9247A8F837F1642FB5A294E9F3CD8',
            key_word1: 'data1',
            key_word2: 'data2',
            key_word3: 'data3',
            key_word4: 'data4',
        }

    },
    //初始化方法
    getInitialState(){
        return{
            //listView 头部数据源
             headerDataArr: [],

            //cell的数据源
            dataSource: new  ListView.DataSource({
                rowHasChanged:(r1,r2) => r1 !== r2
            })
        }
    },

    render() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
                renderHeader={this.renderHeader}
            />
        );
    },

    //单独的cell
    renderRow(rowData){
        return(
            <TouchableOpacity activeOpacity={0.5} onPress={()=>{this.pushToNewsDetail(rowData)}}>
                <View style={styles.cellViewStyle}>
                    {/*左边*/}
                    <Image source={{uri:rowData.images_url}} style={styles.imageStyle}/>
                    {/*右边*/}
                    <View style={styles.rightViewStyle}>
                        <Text style={styles.titleStyle}>{rowData.cate_name}</Text>
                        <Text style={styles.subTitleStyle}>{rowData.goods_name}</Text>
                        <Text style={styles.timeTitleStyle}>{rowData.add_time}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    },
    //跳转到新闻详情页
    pushToNewsDetail(rowData){
        //
        this.props.navigator.push({
            component:NewsDetail,
            title: rowData.cate_name,
            passProps:{rowData},

        })
    },

    //头部
    renderHeader(){
        //判断
        if (this.state.headerDataArr.length == 0) return;
        return(
            <View>
                <ScrollImageView  imageDataArr = {this.state.headerDataArr}
                />
            </View>

        )
    },
    //请求网络数据（复杂的操作放在此方法中）
    componentDidMount()
    {
        this.loadDataFromNet();

    },
    loadDataFromNet()
    {
 fetch(this.props.url_api)
     .then((response)=>response.json())
     .then((responseData)=>{
     //拿到数据
         var headArr = responseData[this.props.key_word1];//轮播数据
         var listArr = responseData[this.props.key_word2];//内容数据
        this.dealWithData(headArr,listArr)
   })


     .catch((error)=>{
     if(error){
         //进行特殊处理
        alert('出现异常');
         var headArr = LocalData[this.props.key_word1];//轮播数据
         var listArr = LocalData[this.props.key_word2];//内容数据
         this.dealWithData(headArr,listArr)
     }
     })
    },
    //处理网络数据
  dealWithData(headArr,listArr){
    //更新状态机
    this.setState({
        //ListView 头部数据源
        headerDataArr:headArr,
        //cell的数据源
        dataSource:this.state.dataSource.cloneWithRows(listArr)
    })
  }
});

const styles = StyleSheet.create({
    cellViewStyle: {
        //确定主轴方向
        flexDirection:'row',
        //设置侧轴的对对齐方式
     //   alignItems: 'center',
        padding: 10,
        borderBottomColor:'#e8e8e8',
        borderBottomWidth:0.5,
    },
    rightViewStyle: {
        width:260,
        marginLeft:8,


    },
    imageStyle: {
        width:90,
        height:90,
    },
    titleStyle: {
        fontSize:16,
        marginBottom:5,


    },
    subTitleStyle: {
        color:'gray',

    },
    timeTitleStyle: {
        //绝对定位
        position: 'absolute',
        right:10,
        bottom:0,
        //边框
        borderWidth:0.5,
        borderColor:'gray',
        borderRadius:5,
        padding:3,
        color:'gray',

    },
});

module.exports = Home;
